<template>
    <Category :flagCard="flagCard"></Category>
    <el-card class="box-card">
        <div v-show="flagCard == 0">
            <el-button @click="addAttr" :disabled="cateStore.C3Id ? false : true" type="primary"
                icon="Plus">添加属性</el-button>
            <el-table :data="tableData" border style="width: 100% ;margin-top: 20px;">
                <el-table-column label="序号" width="90" type="index" />
                <el-table-column prop="attrName" label="属性名称" width="180" />
                <el-table-column label="属性值名称">
                    <template #="{ row: { attrValueList } }">
                        <el-tag v-for="item in attrValueList" class="ml-2" :key="item.id" type="success">{{ item.valueName
                        }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="180">
                    <template #="{ row }">
                        <el-button type="primary" @click="toAddAttr(row)" icon="Edit"></el-button>
                        <el-popconfirm :title="`你确定要删除${row.attrName}吗?`" @confirm="deleteAttr(row.id)">
                            <template #reference>
                                <el-button type="primary" icon="Delete"></el-button>
                            </template>
                        </el-popconfirm></template>
                </el-table-column>
            </el-table>
        </div>
        <div v-show="flagCard == 1" class="attr_value">
            <el-form :model="attrForm" label-width="80px" label-position="left">
                <el-form-item label="属性名称">
                    <el-input v-model="attrForm.attrName" />
                </el-form-item>
            </el-form>
            <el-row class="mb-4">
                <el-button :disabled="!attrForm.attrName" type="primary" icon="Plus" @click="addAttrValue">添加属性值</el-button>
                <el-button @click="cancelAttr">取消</el-button>
            </el-row>
            <el-table :data="attrForm.attrValueList" border style="width: 100% ;margin: 10px 0;">
                <el-table-column label="序号" type="index" width="90" />
                <el-table-column label="属性值名称">
                    <template #="{ row, $index }">
                        <el-input :ref="(el: any) => inputArr[$index] = el" @blur="inputBlur(row, $index)" v-if="row.show"
                            v-model="row.valueName">
                        </el-input>
                        <div v-else @dblclick="toEdit(row, $index)">{{ row.valueName }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="属性值操作">
                    <template #="{ $index }">
                        <el-button icon="Delete" type="primary"
                            @click="attrForm.attrValueList.splice($index, 1)"></el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-row class="mb-4">
                <el-button :disabled="attrForm.attrValueList.length > 0 ? false : true" type="primary"
                    @click="attrTrueAdd">保存</el-button>
                <el-button type="primary" @click="cancelAttr">取消</el-button>
            </el-row>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref, watch, onBeforeUnmount } from 'vue'
import Category from '@/components/category/index.vue'
import categoryStore from '@/store/modules/category';
import { attrInfoList, saveAttrInfo, reqRemoveAttr } from '@/api/product/attr'
import type { Cate_Data, Table_Att_Value } from '@/api/product/attr/type'
import { ElMessage } from 'element-plus'
const cateStore = categoryStore()
// 声明card切换
const flagCard = ref<number>(0)
// 监听分类三id
watch(() => cateStore.C3Id, () => {
    getTable()
})
const attrForm = reactive<Cate_Data>({
    attrName: '',
    attrValueList: [],
    categoryId: '',
    categoryLevel: 3
})
// 添加添加属性切换
const addAttr = () => {
    Object.assign(attrForm, {
        attrName: '',
        attrValueList: [],
        categoryId: cateStore.C3Id,
        categoryLevel: 3
    })
    flagCard.value = 1
}
// 创建一个input数组
const inputArr = ref<any>([])
// 属性table
const tableData = ref<Cate_Data[]>([])
// 获取属性
const getTable = async () => {
    let { C1Id, C2Id, C3Id } = cateStore
    const data = await attrInfoList(C1Id, C2Id, C3Id)
    tableData.value = data.data
}
// 取消
const cancelAttr = () => {
    flagCard.value = 0
}

// 添加属性值
const addAttrValue = () => {
    attrForm.attrValueList.push({
        valueName: '',
        show: true
    })
    nextTick(() => {
        inputArr.value[attrForm.attrValueList.length - 1].focus()

    })
}
// 确定添加或者修改
const attrTrueAdd = async () => {
    const data = await saveAttrInfo(attrForm)
    if (data.code === 200) {
        ElMessage({
            type: "success",
            message: attrForm.id ? '修改成功' : '添加成功'
        })
        flagCard.value = 1
        getTable()
    } else {
        ElMessage({
            type: 'error',
            message: attrForm.id ? '修改失败' : '修改成功'
        })
    }
    cancelAttr()
}
// 输入框失去焦点
const inputBlur = (row: Table_Att_Value, $index: number) => {
    if (row.valueName.trim() === '') {
        ElMessage({
            message: '属性值不能为空',
            type: 'error',
        })
        attrForm.attrValueList.splice($index, 1)
        return
    }
    const index = attrForm.attrValueList.find(item => {
        if (item !== row) return item.valueName === row.valueName
    })
    if (index) {
        attrForm.attrValueList.splice($index, 1)
        ElMessage({
            message: '属性值不能重复',
            type: 'error',
        })
    }
    row.show = false
}
// 双击切换编辑框
const toEdit = (row: Table_Att_Value, $index: number) => {
    row.show = true
    nextTick(() => {
        inputArr.value[$index].focus()
    })
}
// 跳转编辑页面
const toAddAttr = (row: Cate_Data) => {
    Object.assign(attrForm, JSON.parse(JSON.stringify(row)))
    flagCard.value = 0
}

// 删除某个属性
const deleteAttr = async (attrId: number) => {
    const data = await reqRemoveAttr(attrId)
    if (data.code === 200) {
        ElMessage({
            type: 'success',
            message: '删除成功'
        })
        getTable()
    } else[
        ElMessage({
            type: "error",
            message: '删除失败'
        })
    ]
}

// 组件销毁时调用
onBeforeUnmount(() => {
    // 重置库中的数据
    cateStore.$reset()
})
</script>
<script lang="ts">
export default {
    name: 'Attr'
}
</script>

<style scoped lang="scss">
.box-card {
    margin-bottom: 20px;
}

.attr_value {
    .el-input {
        width: 250px;
    }
}
</style>